<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个React</title>
    <!-- 1.引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2.引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    console.log(React, ReactDOM);
    // 3.创建React元素
    let title = React.createElement('h1', null, '你好React')
    // 4.渲染元素到页面中
    // 17版本语法
    // ReactDOM.render(title,document.getElementById('root'))
    // 18版本语法
    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById('root'))
    // 渲染元素到页面中
    root.render(title)



    // 虚拟DOM->普通对象
    console.log('VDOM', title)
    console.log('TDOM', document.getElementById('root'))
    let TDOM = document.getElementById('root')
    // 判断数据的类型 typeof instanof
    let arr = [] // array -> object
    console.log('title-typeof', typeof title, typeof arr)
    console.log('title-instanceof', title instanceof Object)
    console.log('arr-instanceof', arr instanceof Array)


    
</script>

</html>